<template>
  <div class="feedBack">
      <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">民意调查</span>
      <span class="header-wrap-right">
      </span>
    </div>
    <!-- 列表 -->
    <div class="feedBck-list-box" v-if="length>0">
      <div class="feedBck-list" @click="getDome(list.id)" v-for="(list,index) in listData" :key="index">
        <div class="list-flex" v-if="showDome==false">
          <span class="feedBack-content" style="margin: .1rem 0;">{{list.name}}</span>
          <span class="feedBack-content" style="margin: .1rem 0;color: #FD5585;text-align:center;">{{list.createtime | formatTime}}</span>
          <span class="feedBack-content" style="margin: .1rem 0;">></span>
        </div>
      </div>
      <div class="newList-box" v-if="showDome">
        <NewList :message='opinionData' @getshow="cancelPopup"/>
      </div>
    </div>
    <Tips v-if="length==0"/>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Rate } from 'vant';
import NewList from './components/newList'
import Tips from '../../components/tips'
export default {
  filters: {
    formatTime: function time(value) {
    var now = new Date(value * 1000);
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
      return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
    }
  },
  data(){
    return{
      listShow:true,
      length: null,
      showDome: false,
      buttonShow: true,
      infoData:[],
      listData:[],
      listReply:[],
      opinionData:{},
      host:api.host,
      dfdall: [
        {
            "value": "是",
            "text": "是"
        },
        {
            "value": "否",
            "text": "否"
        },
      ],
      dfdall1: [
        {
            "value": "",
            "text": ""
        },
        {
            "value": "",
            "text": ""
        },
        {
            "value": "",
            "text": ""
        },
      ]
    }
  },
  created(){
    this.getinfo()
    this.getList()
    this.getMineTrip()
    this.quarters()
  },
  methods:{
    tofeedBackDetail(id){
      this.$router.push({
        path: '/listenDetail',
        query: {
          id
        }
      })
    },
    cancelPopup(){
      this.getMineTrip()
      this.show = true
      this.showDome = false
      this.buttonShow = true
    },
    goback(){
      this.$router.go(-1)
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
    getDome(id){
      // this.$toast('功能完善中')
      // return
      this.getDetails(id)
      this.show = false
      this.showDome = true
    },
    //获取用户资料
    getinfo(){
      this.$get(api.info, {})
      .then((response) => {
        this.infoData = response.data.data
      })
      .catch((error) => {
        console.log(error)
      });
    },
   //获取列表
    getList(){
      this.$get(api.opinionhtmlList, {})
      .then((response) => {
        this.listData = response.data.data.list
        this.length = response.data.data.total
      })
      .catch((error) => {
        console.log(error)
      });
    },
    //获取详情
     getDetails(id){
       this.$get(api.opinionDetails, {
         params: {
          id:id
         }
       })
       .then((response) => {
          this.opinionData = response.data.data
          this.opinionData.html.forEach((element,index) => {
            if(element.type==2&&element.options.length<=0){
              console.log(888,element)
              element.options=this.dfdall
            }
            if(element.type==0&&!element.options){
              console.log(999,element)
              element.options=this.dfdall1
            }
          });

         console.log('opinionData',this.opinionData)
       })
       .catch((error) => {
         console.log(error)
       });
     },
  //获取绑定小区
    quarters(){
      this.$get(api.quarters,{})
      .then((response) => {
        if(response.status==200){
          this.defaults = response.data.data
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
     getMineTrip(id){
      // this.$get(api.FeedbackList,{
      //   params: {
      //     modular:'opinion'
      //   }
      // })
      // .then((response)=>{
      //   if(response.data.code === 1){
      //     this.length = response.data.data.list.length
      //     this.listData = response.data.data.list;
      //     this.listReply = response.data.data.re;
      //   }
      // })
      // .catch((error) => {
      //   console.log(error);
      // });
    },
  },
  components:{
    [Rate.name]: Rate,
    NewList,
    Tips
  }
}
</script>

<style scoped>
.feedBack{
  background: #fff;
}
.feedBck-list-box{
  margin: 1rem .5rem 0rem;
  border-bottom: 1px solid #ccc;
}
.feedBck-list{
  width: 100%;
  display: flex;
}
.list-flex{
  display: flex;
  height: 1rem;
  line-height: 1rem;
  flex: 1;
}
.list-flex span:nth-of-type(1){
  flex: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  font-weight: bold;
}
.list-flex span:nth-of-type(2){
  flex: 2;
}
.list-flex span:nth-of-type(3){
  text-align: right;
  font-size: .35rem;
}
.list-flex:nth-of-type(2) span{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  color: #000;
}
.new-content{
  display: flex;
  width: 88%;
}
.new-content span{
  flex: 1;
}
.feedBack-title{
  font-size: .32rem;
  color: #000;
}
.star{
  margin: .1rem 0;
}
.sunmit-box{
  z-index: 888;
  position: fixed;
  bottom: 0rem;
  left: 0;
  width: 100%;
  height: 2rem;
  background: #fff;
}
.submit{
  margin: .5rem auto 0;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 88%;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}
.newList-box{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 888;
  height: 100vh;
  /* background: #f7f6fb; */
}
.feedBackReply{
  display: flex;
}
.feedBackReply span{
  width: auto;
  color: #57c5c6!important;
  font-weight: bold;
}
.feedBackReply span:nth-of-type(2){
  margin-left: .2rem;
  font-size: .25rem;
}
</style>
